<!--Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0

Purpose:
items.html is a HTML template for an Amazon DynamoDB item tracker app.
-->
<!--snippet-start:[cross-service.HTML.ddb-item-tracker.items]-->
<!doctype html>
<html>
  <head>
    <title>Modify Items</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="./js/items.js" th:src="@{/js/items.js}"></script>

    <!-- CSS files  -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"
    />
    <link rel="stylesheet" href="/css/styles.css" />
    <link rel="stylesheet" href="/css/col.css" />
    <link rel="stylesheet" href="/css/button.css" />
    <link rel="stylesheet" href="/css/common.css" />
  </head>
  <body onload="$('#modform').hide()">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="index.html">Welcome</a>
          <a class="nav-item nav-link" href="add.html">Add items </a>
          <a class="nav-item nav-link" href="items.html"
            >Get items <span class="sr-only">(current)</span></a
          >
        </div>
      </div>
    </nav>

    <div class="container" id="manageItems">
      <h3>Welcome to Amazon DynamoDB Item Tracker</h3>
      <h3 id="info3">Get Items</h3>
      <p>You can manage items in this view.</p>

      <table id="myTable" class="display" style="width: 100%">
        <thead>
          <tr>
            <th>Item Id</th>
            <th>Guide</th>
            <th>Date Created</th>
            <th>Description</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No Data</td>
            <td>No Data</td>
            <td>No Data</td>
            <td>No Data</td>
            <td>No Data</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Item Id</th>
            <th>Guide</th>
            <th>Date Created</th>
            <th>Description</th>
            <th>Status</th>
          </tr>
        </tfoot>
        <div id="success3"></div>
      </table>
    </div>
    <br />
    <div id="modform" class="container">
      <h3>Modify an Item</h3>
      <p>You can modify items.</p>

      <form>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>ID</label>
            <input
              class="form-control"
              id="id"
              type="id"
              placeholder="Id"
              readonly
              data-validation-required-message="Item Id."
            />
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Description</label>
            <textarea
              class="form-control"
              id="description"
              rows="5"
              placeholder="Description"
              data-validation-required-message="Description."
            ></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Status</label>
            <textarea
              class="form-control"
              id="status"
              rows="5"
              placeholder="Status"
              required="required"
              data-validation-required-message="Status"
            ></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <br />
      </form>
    </div>

    <div id="dialogtemplate2" border="2" title="Basic dialog">
      <table align="center">
        <tr>
          <td>
            <p>Options:</p>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>
            <p>Select Manager:</p>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>
            <select id="manager">
              <option value="example@amazon.com">example@amazon.com</option>
              <option value="example@amazon.com">swhite@nomail.com</option>
            </select>
          </td>
          <td></td>
        </tr>

        <tr></tr>

        <tr>
          <td>
            <button class="shiny-blue" type="button" onclick="GetItems()">
              Get Active Items
            </button>
          </td>

          <td></td>
        </tr>
        <tr>
          <td>
            <button
              class="shiny-blue"
              id="singlebutton"
              type="button"
              onclick="GetSingleItem()"
            >
              Get Single Item
            </button>
          </td>

          <td></td>
        </tr>
        <tr>
          <td>
            <button
              class="shiny-blue"
              id="updatebutton"
              type="button"
              onclick="UpdateItem()"
            >
              Update Item
            </button>
          </td>

          <td></td>
        </tr>
        <tr>
          <td>
            <button
              class="shiny-blue"
              type="button"
              id="reportbutton"
              onclick="Report()"
            >
              Send Report
            </button>
          </td>

          <td></td>
        </tr>
      </table>
    </div>
    <script src="js/items.js"></script>

    <style>
      .ui-widget {
        font-family: Verdana, Arial, sans-serif;
        font-size: 0.8em;
      }

      .ui-widget-content {
        background: #f9f9f9;
        border: 1px solid #90d93f;
        color: #222222;
      }

      .ui-dialog {
        left: 0;
        outline: 0 none;
        padding: 0 !important;
        position: absolute;
        top: 0;
      }

      #success {
        padding: 0;
        margin: 0;
      }

      .ui-dialog .ui-dialog-content {
        background: none repeat scroll 0 0 transparent;
        border: 0 none;
        overflow: auto;
        position: relative;
        padding: 0 !important;
      }

      .ui-widget-header {
        background: #000;
        border: 0;
        color: #fff;
        font-weight: normal;
      }

      .ui-dialog .ui-dialog-titlebar {
        padding: 0.1em 0.5em;
        position: relative;
        font-size: 1em;
      }
    </style>
  </body>
</html>
<!--snippet-end:[cross-service.HTML.ddb-item-tracker.items]-->
